<!--
 * @Description: 数据通道任务
 * @Author: liqing
 * @Date: 2020-02-18 14:55:13
 * @LastEditTime : 2020-01-14 14:30:37
 * @LastEditors  : Please set LastEditors
 -->
<template>
    <search-table
	    ref="searchTable"
		:columns="taskCol" 
        :data="taskData"
		:total="taskTotal"
		:page.sync="taskCurrentPage"
		:size.sync="taskItemPage"
		@change-size="switchTaskItemPage"
		@change-page="switchineTaskCurrentPage"
	>
    <Alert type="warning" show-icon v-if="configMode !== 1" slot="alert">
        <p style="color:#f90">注意事项:</p>
          <template v-if="onlineMode == 1">
              <p>1.该任务必须配置</p>
              <p>2.一般“一键配置”即可</p>
          </template>
          <template v-else>
              <p>1.一般只有在使用实物设备接入的情况下才配置该任务</p>
              <p>2.一键配置的该任务只适用于选手接入的电脑可以访问答题系统</p>
          </template>
      </Alert>
      <template slot="search">
        <Button type="primary" ghost @click="createFlagTask" class="zIndexStyleBtn" 
            v-if="configMode !== 1" :disabled="disabledAllBtn"><Icon type="ios-add" :size="16" class="position_i"/>添加任务</Button>
        <span v-else></span>
        <!--<Poptip
            :confirm = true
            title="您确定要删除这些任务吗？"
            placement="right"
            @on-ok="deleteManyTask"
            @on-cancel="cancel">
            <Button type="error" ghost class="zIndexStyleBtn"><Icon type="md-trash" :size="16" class="position_i"/>删除任务</Button>
        </Poptip>-->
        <!-- <Button type="primary" @click="configeManage" class="zIndexStyleBtn"><Icon type="md-settings" :size="16" class="position_i"/>配置管理</Button> -->
        <!-- <Page :total="taskTotal"  show-elevator :current="taskCurrentPage" :page-size="taskItemPage" :show-total= true  @on-change="switchineTaskCurrentPage" @on-page-size-change="switchTaskItemPage" class-name="pageStyle" /> -->
    </template>
        <Modal
            v-model="createFlagTaskModal"
            title="答题系统通道配置任务"
            ok-text = "确定"
            width=900
            :loading = createFlagTaskModalLoading
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" @submit.native.prevent="keydownEnter">
                <FormItem label="配置类型">
                     <RadioGroup v-model="configType" @on-change="changeConfigType">
                         <Radio label="2" :disabled="isDistributed==1">一键配置</Radio>
                         <Radio label="1">手动配置</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="名字" prop="name">
                    <Input v-model.trim="formValidate.name" placeholder="请输入名称" clearable :maxlength="64" @keydown.enter.native="keydownEnter"></Input>
                </FormItem>
                <!--<FormItem label="类型" prop="taskMode">
                    <RadioGroup v-model="formValidate.taskMode">
                        <Radio label="normal" :disabled="disabledTepBol">流程任务</Radio>
                        <Radio label="preset" :disabled="disabledTepBol">预设临机任务</Radio>
                        <Radio label="temp" :disabled="!disabledTepBol">实时任务</Radio>
                    </RadioGroup>
                </FormItem>-->
                <!--<FormItem label="周期" prop="expireTime">
                     <RadioGroup v-model="formValidate.expireTime">
                        <Radio label="180">3分钟</Radio>
                        <Radio label="300">5分钟</Radio>
                        <Radio label="420">7分钟</Radio>
                        <Radio label="480">8分钟</Radio>
                        <Radio label="600">10分钟</Radio>
                    </RadioGroup>
                </FormItem>-->
                <FormItem label="子网" prop="deviceIdList" style="position:relative" v-if="configType == '1'">
                    <Transfer
				        :data="showSubnetList"
				        :list-style="listStyle"
				        :target-keys="formValidate.deviceIdList"
				        :render-format="render2"
				        filter-placeholder="请输入名称或CIDR搜索"
				        :filter-method="filterMethod"
				        :operations="['移除','选择']"
				        :titles="['未选子网','已选子网']"
				        filterable
				        @on-change="changeSubnet"></Transfer>
                    <!--<Select filterable v-model="formValidate.deviceIdList" placeholder="Select subnet" clearable multiple ref="store" @on-change="arrayEqual">
                        <Input v-model.trim="searchSubnet" placeholder="请输入名称搜索" style="width: 80%" class="ivu-select-item ivu-filter-input"/>
						<Checkbox v-model="selectAll" @on-change="selectAllSubnet">全选</Checkbox>
                        <Option  v-for="subnet in showSubnetList" :key="subnet.id" :value="subnet.id">名称：{{subnet.name}}，CIDR：{{subnet.cidr}}</Option>
                    </Select>-->
                    <!--<div v-show="configurationInformation" :style="{position:'absolute',left:cardPanelLeft,top:cardPanelTop,zIndex:'9999999999999999',}" @mouseenter="jinru" @mouseleave="yichu" @click="ddd">
                        <Card :style="{minWidth:'350px',maxWidth:'600px'}"  >
                            <p slot="title" style="position:relative">
                                <Icon type="ios-construct"></Icon>
                                {{configPanel.configName}}
                                <span slot="title" style="position:absolute;right:0px">
                                    <Icon type="ios-contact"></Icon>
                                    {{configPanel.configCreatorName}}
                                </span>
                            </p>
                            <ul>
                                <li><span class="_dot"></span>path：{{configPanel.configPath}}</li>
                                <li><span class="_dot"></span>argArr：{{configPanel.configArg}}</li>
                                <li><span class="_dot"></span>cmd：{{configPanel.configCmd}}</li>
                                <li><span class="_dot"></span>sysType：{{configPanel.configSystype}}</li>
                                <li><span class="_dot"></span>protocol：{{configPanel.protocol}}</li>
                                <li><span class="_dot"></span>serverPort：{{configPanel.serverPort}}</li>
                                <li><span class="_dot"></span>language：{{configPanel.language}}</li>
                                <!-- <li><span class="_dot"></span>
                                    configContent：
                                    <div v-for="item in configPanel.configContent" style="padding-left:15px">{{item.configCmd +'      /  ' +item.configArg}}</div>
                                </li> -->
                                <!--<li><span class="_dot"></span>CreateTime：{{configPanel.configCreateTime}}</li>
                                <li><span class="_dot"></span>Desc：{{configPanel.configDescription}}</li>
                            </ul>
                        </Card>
                    </div>-->
                </FormItem>
                <FormItem label="协议" prop="protocol" v-if="configType == '1'">
                    <RadioGroup v-model="formValidate.protocol">
                        <Radio label="tcp"></Radio>
                        <Radio label="udp"></Radio>
                        <Radio label="icmp"></Radio>
                    </RadioGroup>
                </FormItem>
                <!-- <div v-show="configerParams" :style="{'border':'1px solid #ddd','boxShadow': boxShadow,'borderRadius': '5px','padding': '20px','cursor':'pointer'}" @mouseover="overStyle" @mouseout="removeStyle">
                    <p style="text-align:center;font-size:16px">配置详情</p>
                    <FormItem label="Profile" prop="Profile" >
                        <span class="_dot" style="position:absolute;left:-62px;top:11px"></span>
                        <Input v-model.trim="formValidate.Profile"  readonly="readonly"></Input>
                    </FormItem>
                    <FormItem label="osInfo" prop="osInfo" >
                        <span class="_dot" style="position:absolute;left:-62px;top:11px"></span>
                        <pre v-model="formValidate.osInfo">{{formValidate.osInfo}}</pre>
                    </FormItem>
                    <FormItem label="类型" prop="type" >
                        <span class="_dot" style="position:absolute;left:-52px;top:11px"></span>
                        <Input v-model.trim="formValidate.type"  readonly="readonly"></Input>
                    </FormItem>
                    <FormItem label="指令" prop="configContent" >
                        <span class="_dot" style="position:absolute;left:-52px;top:11px"></span>
                        <div v-for="item in formValidate.configContent" style="padding-left:15px">{{item.cmd +'/'+item.args}}</div>
                    </FormItem>
                </div> -->
                <FormItem v-model="formValidate.selectedVmData"  label="服务" v-if="configType == '1'">
                    <span  class="starlet">*</span>
                    <input type="hidden" >
                    <Tag v-for="item in formValidate.selectedVmData" :key="item.name" :name="item.id" closable @on-close="handleClose2" color="primary" type='dot' >{{ item.name }}</Tag>
                </FormItem>
                <div style="text-align:right" v-if="configType == '1'">
                    <!--<Button type="primary" @click="addSelectedData" style="margin-right:17px">添加</Button>-->
                    <Input placeholder="请输入名称" style="width: 210px" v-model.trim="queryServerInfo.name" clearable></Input>
                    <Input placeholder="请输入IP" style="width: 210px" v-model.trim="queryServerInfo.ip" clearable></Input>
                    <Button type="primary" @click="refreshVmList" style="margin-left:5px">搜索</Button>
                </div>
                <Table ref="" :columns="serverCol" :data="serverList"  :stripe="showStripe" :show-header="showHeader" :size="tableSize" style="margin-top:10px" @on-selection-change="getSelectedData" v-if="configType == '1'"></Table>
                <Page :total="serverTotal"  show-elevator  :current="queryServerInfo.page" :page-size="queryServerInfo.pageSize" :show-total= true  @on-change="changeServerPage" @on-page-size-change="changeServerSize" class-name="pageStyleVm" v-if="configType == '1'"/>
                <!--<FormItem label="属性" >
                    <cusAttribute ref="cusAttribute" @func="getMsgFormSon" v-bind:msgVal="propertiesData" v-if="createFlagTaskModal"></cusAttribute>
                </FormItem>
                 <FormItem label="描述" prop="desc" style="margin-top:10px">
                    <Input v-model.trim="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容" clearable :maxlength="200"></Input>
                </FormItem>-->
            </Form>
        </Modal>
        <Modal
            v-model="taskDeailModal" footer-hide
            title="任务启动详情"
            width = '80'
            >
            <Table ref="" :columns="taskDeailColumns" :data="taskDeailData"  :stripe="showStripe" :show-header="showHeader" :size="tableSize" ></Table>
        </Modal>
        <Modal 
            v-model="taskConfigerMess" 
            width = "80%" 
            title="循环带外采集配置"
            okText = "关闭"
            cancelText=""
            @on-cancel = "clickEvent"
            @on-ok = "clickEvent"
        >
            <!--<outbandCaptureCollect ref="outband"></outbandCaptureCollect>-->
        </Modal>
    </search-table>
</template>
<script>
//import axios from '@/libs/api.request'
//import outbandCaptureCollect from '@/components/configer/outbandCaptureCollect'
// import processControl from '@/components/topologyDisplay/processPanel/processControl'
import cusAttribute from '@/view/drill_compete/page/cusAttribute'
import {saveoutbandTask,getTaskList,deleteTask,updateTask,amendTask,activeTask,taskDetail,taskDetailHis,deleteManyTask,hostDetail,getTaskListDetailData,showConfiguration,loadConfiguration,getServerList} from '@/api/drill'
import {getaccessgrouplist,getprojsubnet} from '@/api/access_new'
// import { paserTaskStatus } from '@/libs/utils'
import { taskCol } from './task_new/taskMixin';
const validateName = (rule, value, callback) => {
    var myReg = /[~!！@#$%^&*()/\|,<>?"'“‘();:+=\[\]{}]/;
    value = value.replace(/\s*/g,"");
    if(!value){
        callback("请填写名字");
    }else{
        if (myReg.test(value)) {
            callback("名字不能包含特殊字符");
        } else {
            callback();
        }
    }
};

export default {
    name:"topoOutband",
    components:{
        //outbandCaptureCollect
        cusAttribute
    },
    props:['disabledAllBtn', 'onlineMode', 'configMode','isDistributed'],
    mixins:[taskCol],
    data(){
        return{
            tableHeight:'',
            panelWidth:'',
            taskConfigerMess:false,
            currentProjectId:"",
            taskTypeTable:'tunnel',
            taskTypeTableTitle:"",
            selectedData:[],
            selectedDataConfiger :[],
            // amendTaskId:"",
            headerData:{
            	serintervalTimeFun:{}
            },
            configType: '1',
            subnetList:[],
            listStyle: {
                width: '350px',
                height: '300px'
            },
            queryServerInfo:{
                page:1,
                pageSize:10,
                order:'asc',
                sortBy:'name',
                name:'',
                ip:''
            },
            allServerList:[],
            serverList:[],
            serverTotal:0,
            serverCol:[
                {
                    type: 'expand',
                    width: 60,
                    align: 'center',
                    render:(h,params) => {
                    	return h('div',{},[
                    		h('p',{style:{width:'50%',textAlign:'center'}},'bridge:' + params.row.bridge),
                    		h('p',{style:{width:'50%',textAlign:'center'}},'port:' + params.row.bridge),
                    		h('p',{style:{width:'50%',textAlign:'center'}},'creatorName:' + params.row.creatorName),
                    		h('p',{style:{width:'50%',textAlign:'center'}},'createTime:' + params.row.createTime)
                    	])
                    }
                }, 
                {
                    title: this.$t('name'),
                    key: 'name',
                    align:'center'
                },
                {
                    title: 'IP',
                    key: 'ip',
                    align:'center'
                },
                {
                    title:this.$t('Add'),
                    key:'add',
                    align:'center',
                    width:80,
                    render:(h,params) =>{
                        let _this = params;
                        return h('Button', {
                            props: {
                                type: 'primary',
                            },
                            on:{
                                click: (e) => {
                                    if(this.selectedVmDataTable.indexOf(_this.row.id)!=-1){
                                        this.$Message.info("已添加")
                                        return;
                                    }
                                    // alert('-')
                                    this.addVmAfterTable(_this.row)
                                    this.selectedVmDataTable = [_this.row.id]
                                    this.formValidate.selectedVmData = [{
                                        "name":_this.row.name,
                                        "id":_this.row.id
                                    }]
                                },
                            }
                        }, "+");
                    }
                }
            ],
            columnsData: [
//              {
//                  type: 'selection',
//                  width: 60,
//                  align: 'center',
//                  
//              },
                {
                    title: this.$t('name'),
                    key: 'name',
                     align:'center',
                     placement:'top-left',
                    tooltip:true,
                    width: 240
                },
                // {
                //     title: 'TaskType',
                //     key: 'taskType',
                //      align:'center'
                // },
                // {
                //     title: this.$t('ConfigurationName'),
                //     key: 'configName',
                //     align:'center'
                // },
                // {
                //     title: 'id',
                //     key: 'id',
                //     visible:false
                // },
                {
                    title: this.$t('creatorName'),
                    key: 'creatorName',
                     align:'center',
                     tooltip:true,
                     width:100
                },
                {
                    title: this.$t('CTime'),
                    key: 'created',
                     align:'center'
                },
//              {
//                  title:this.$t('Desc'),
//                  key:'description',
//                  align:'center'
//              },
                {
                    title: this.$t('Status'),
                    key: 'status',
                    align:'center',
                    minWidth:140,
                    maxWidth:140,
                    placement:'top-right',
                    render:(h,params)=>{
                        switch (params.row.status) {
                            case "running":
                                return h('Tag',{
                                    props:{
                                        type:'border',
                                        color:'success'
                                    },
                                },'运行中')
                                break;
                            case "error":
                            case "failed":
                                return h('Tag',{
                                    props:{
                                        type:'border',
                                        color:'error'
                                    },
                                },'失败')
                                break;
                            case "completed":
                                return h('Tag',{
                                    props:{
//                                      text:'完成',
                                        type:'border',
                                        color:'primary'
                                    },
                                },'完成')
                                break;
                            case "initialized":
                                return h('Tag',{
                                    props:{
//                                      text:'初始化',
                                        type:'border',
                                        color:'default'
                                    },
                                },'初始化')
                                break;
                            case "starting":
                                return h('Tag',{
                                    props:{
//                                      text:'启动中',
                                        type:'border',
                                        color:'success'
                                    },
                                },'启动中')
                                break;
                            case "closing":
                                return h('Tag',{
                                    props:{
//                                      text:'关闭中',
                                        type:'border',
                                        color:'success'
                                    },
                                },'关闭中')
                                break;
                            default:
                                break;
                        }
                    }

                },
                {
                    title:this.$t('Details'),
                    key:'',
                    align:'center',
                    // minWidth:140,
                    render:(h,params)=>{
                        let statics = params.row.overview;
                        let statusGroup = [];
                        if(JSON.stringify(statics) != "{}"){
                            for(let i in statics){
                                statusGroup.push(h('span',{},paserTaskStatus(i)+':'+statics[i]))
                            }
                        }
                        return h('span',{},statusGroup)
                    }
                },
                {
                    title:this.$t('operation'),
                    key:'-',
                    align:'center',
                    // width:500,
                    minWidth:360,
                    maxWidth:360,
                    placement:'top-right',
                    action:true,
                    render:(h,params)=>{
                        let  _this = this;
                        let taskStatus = null
                        let taskBtnType = null
                        let btnStyle = null;
                        if(params.row.taskMode=="normal"){
                            btnStyle = "none"
                        }else{
                            btnStyle = "inline-block"
                        }
                        switch (params.row.status) {
                            case "initialized":
                                taskStatus = "开始"
                                taskBtnType = "success"
                                break;
                            case "error":
                            case "failed":
                                taskStatus = "开始"
                                taskBtnType = "success"
                                break;
                            case "running":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                            case "completed":
                                taskStatus = "开始"
                                taskBtnType = "success"
                                break;
                            case "starting":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                            case "closing":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                             case "stop_error":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                            default:
                                break;
                        }
                        return h("div",{
                        	attrs:{
                        		class:'btnCenter'
                        	}
                        },[
                            h('Poptip',{
                                props:{
                                    confirm:true,
                                    title:"您确定要删除此任务吗？",
                                    transfer:true
                                },
                                on:{
                                    'on-ok':()=>{
                                        _this.deleteTask(params.row.id)
                                    },
                                    'on-cancel':()=>{
                                        
                                    }
                                }
                            },[
                              h('Button',{
                                props:{
                                    type:'text',
                                    size:'small',
                                    disabled:this.disabledAllBtn
                                },
                                attrs:{
                                	title:'删除'
                                },
                                style:{
                                    border:'none',
									background:'none',
									boxShadow:'none',
                                    display: this.configMode === 1 ? 'none':'inline-block'
                                },
                                },[
                                	h('img', {
				                        attrs: {
				//                          src: !this.setReBtnStatus(params.row) ?require('../../../assets/globalIcon/del.png'):require('../../../assets/globalIcon/dis-del.png'),
				                        	src:this.disabledAllBtn ? require('../../../assets/project/delNote-d.png') : require('../../../assets/project/delNote-h.png')
				                        },
				                        style: {
				                            cursor: 'pointer',
//				                            'margin-right':'5px',
				                            'vertical-align': 'middle',
//				                            width:'16px',
//				                            height:'auto',
				                            display:'inline-block',
				                            marginBottom:'4px',
				                        },
				                    }),
//				                    h('span',{
//				                        style: {
//				                            cursor: 'pointer',
//				//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
//											color:'#2d8cf0'
//				                        },
//				                    },'删除')
                                ])]),
                            h('Button',{
                                props:{
                                    type:"text",
                                    size:'small',
                                    disabled:this.disabledAllBtn
                                },
                                attrs:{
                                	title:'修改'
                                },
                                style:{
                                    border:'none',
									background:'none',
									boxShadow:'none',
                                    display: this.configMode === 1 ? 'none':'inline-block'
                                },
                                on:{
                                    click:()=>{
                                        _this.updateTask(params.row.id)
                                    }
                                }
                            },[
                            	h('img', {
			                        attrs: {
			//                          src: !this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/modify.png'):require('../../../assets/globalIcon/dis-modify2.png'),
			                        	src: this.disabledAllBtn ? require('../../../assets/project/modifys.png') : require('../../../assets/project/modifys-h.png')
			                        },
			                        style: {
			                            cursor: 'pointer',
//			                            'margin-right':'5px',
			                            'vertical-align': 'middle',
//			                            width:'16px',
//			                            height:'auto',
			                            display:'inline-block',
			                            marginBottom:'4px',
			                        },
			                    }),
//			                    h('span',{
//			                        style: {
//			                            cursor: 'pointer',
//			//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
//										color:'#2d8cf0'
//			                        },
//			                    },'修改')
                            ]),
                            h('Poptip',{
                                props:{
                                    confirm:true,
                                    title:"您确定要"+taskStatus+"此任务吗？",
                                    transfer:true
                                },
                                on:{
                                    'on-ok':()=>{
                                        _this.activeTask(params.row.id,taskStatus)
                                    },
                                    'on-cancel':()=>{
                                        
                                    }
                                }
                            },[
                              h('Button',{
                                props:{
                                    //type:taskBtnType,
                                    type:'text',
                                    size:'small',
                                    disabled:this.disabledAllBtn
                                },
                                attrs:{
                                	title:taskStatus + '任务'
                                },
                                style:{
                                    border:'none',
									background:'none',
									boxShadow:'none',
                                    display:btnStyle
                                },
                                },[
                                	h('img', {
				                        attrs: {
				//                          src: !this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/modify.png'):require('../../../assets/globalIcon/dis-modify2.png'),
				                        	src:taskStatus == '停止' ? (this.disabledAllBtn ? require('../../../assets/scene/dis-stop-task.png') : require('../../../assets/scene/stop-task.png')) : (this.disabledAllBtn ? require('../../../assets/scene/dis-start-task.png') : require('../../../assets/scene/start-task.png'))
				                        },
				                        style: {
				                            cursor: 'pointer',
	//			                            'margin-right':'5px',
				                            'vertical-align': 'middle',
	//			                            width:'16px',
	//			                            height:'auto',
				                            display:'inline-block',
				                            marginBottom:'4px',
				                        },
				                    }),
				                    h('span',{
				                        style: {
				                            cursor: 'pointer',
				//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
											color:'#2d8cf0'
				                        },
				                    })
                                ])]),
                            //     h('Poptip',{
                            //     props:{
                            //         confirm:true,
                            //         title:"您确定要初始化此任务吗？",
                            //     },
                            //     on:{
                            //         'on-ok':()=>{
                            //             _this.activeTask(params.row.id,"init")
                            //         },
                            //         'on-cancel':()=>{
                                        
                            //         }
                            //     }
                            // },[h('Button',{
                            //     props:{
                            //         type:"info",
                            //         size:'small'
                            //     },
                            //     style:{
                            //         margin:'5px'
                            //     },
                            //     },'初始化任务')]),
                                h('Button',{
                                props:{
                                    type:"text",
                                    size:'small'
                                    // style:{margin:'10px'}
                                },
                                style:{
                                    border:'none',
									background:'none',
									boxShadow:'none',
                                },
                                on:{
                                    click:()=>{
                                        _this.taskDeail(params.row.id)
                                    }
                                }
                            },[
                            	h('img', {
			                        attrs: {
			//                          src: !this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/modify.png'):require('../../../assets/globalIcon/dis-modify2.png'),
			                        	src:require('../../../assets/project/magnifier-h.png')
			                        },
			                        style: {
			                            cursor: 'pointer',
//			                            'margin-right':'5px',
			                            'vertical-align': 'middle',
//			                            width:'16px',
//			                            height:'auto',
			                            display:'inline-block',
			                            marginBottom:'4px',
			                        },
			                    }),
			                    h('span',{
			                        style: {
			                            cursor: 'pointer',
			//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
										color:'#2d8cf0'
			                        },
			                    })
                            ]),
                        ])
                    }

                }
            ],

            taskData: [
                
            ],
            columnsVmList:[
                {
                    type: 'expand',
                    width: 60,
                    align: 'center',
                    render:(h,params) => {
                    	return h('div',{},[
                    		h('p',{style:{width:'50%',textAlign:'center'}},'bridge:' + params.row.bridge),
                    		h('p',{style:{width:'50%',textAlign:'center'}},'port:' + params.row.bridge),
                    		h('p',{style:{width:'50%',textAlign:'center'}},'creatorName:' + params.row.creatorName),
                    		h('p',{style:{width:'50%',textAlign:'center'}},'createTime:' + params.row.createTime)
                    	])
                    }
                }, 
                {
                    title:this.$t('name'),
                    key:'name',
                    align:'center'
                },
                {
                    title:'IP',
                    key:'IP',
                    align:'center',
//                  render:(h,params)=>{
//                      let value = params.row.IP;
//                      let oIP_ = [];
//                      value.forEach((item,i)=>{
//                          oIP_.push(h("p",{
//                              color:'#000',
//                          },item))
//                      })
//                      return h("div",oIP_)
//                  }
                },
                // {
                //     title:'Profile',
                //     key:'profile',
                //     align:'center',
                // },
                {
                    title:this.$t('Add'),
                    key:'add',
                    align:'center',
                    width:80,
                    render:(h,params) =>{
                        let _this = params;
                        return h('Button', {
                            props: {
                                type: 'primary',
                            },
                            on:{
                                click: (e) => {
                                    if(this.selectedVmDataTable.indexOf(_this.row.id)!=-1){
                                        this.$Message.info("已添加")
                                        return;
                                    }
                                    // alert('-')
                                    this.addVmAfterTable(_this.row)
                                    this.selectedVmDataTable.push(_this.row.id)
                                    this.formValidate.selectedVmData.push({
                                        "name":_this.row.name,
                                        "id":_this.row.id
                                    })
                                },
                            }
                        }, "+");
                    }
                }
            ],

            dataVmList:[
                
            ],
            selectedVmDataTable:[
                
            ],
            configurationData:[
                
            ],
            createFlagTaskModalLoading:true,
            showBorder: false,
            showStripe: true,
            showHeader: true,
            showIndex: true,
            showCheckbox: false,
            fixedHeader: false,
            tableSize: 'small',
            createFlagTaskModal : false,
            formValidate: {
                name: '',
                configer: '',
                Profile:'',
                osInfo:'',
                type:'',
                configContent:'',
                selectedVmData:[
                    
                ],
                deviceIdList:[],
                protocol:'tcp',
                desc: '',
                vmName:'',
                vmIP:'',
                taskMode:'preset',
                expireTime:'180'
            },
            ruleValidate: {
                name: [
                    { required: true, message: '', trigger: 'change',validator:validateName }
                ],
                configer: [
                    { required: true, message: '请选择配置', trigger: 'change'},
                ],
                selectedVmData:[
                    {required:true ,message:"请选择虚拟机"}
                ],
                deviceIdList:[
                     {required:true ,type:'array',min:1,message:"请选择虚拟机",trigger: 'change'}
                ],
                protocol:[
                	{required:true ,message:"请选择协议",trigger: 'change'}
                ],
//              taskMode: [
//                 { required: true, message: '', trigger: 'change'}
//              ],
                expireTime: [
                   { required: true, message: '', trigger: 'change'}
                ],
            },
            vmCurrentPage:1,
            vmItemPage:10,
            vmTotal:0,
            taskCurrentPage:1,
            taskItemPage:10,
            taskTotal:0,
            judgePanelType:true,//判断是修改还是保存
            workingAreaTaskId:"",//存放修改的任务id

            //查看详情面板
            taskDeailModal:false,
            taskDeailColumns:[
//              {
//                  type:"expand",
//                  width:30,
//                  render: (h, params) => {
//                      return h('div',{},[
//                          h('Row',{props:{class:'expand-row'}},[
//                              h('Col',{props:{span:'8'},style:{width:'50%'}},[
//                                  h('span',{props:{class:'expand-key'}},'宿主机名称:  '),
//                                  h('span',{props:{class:'expand-value'}},params.row.host)
//                              ]),
//                              h('Col',{props:{span:'8'},style:{width:'50%'}},[
//                                  h('span',{props:{class:'expand-key'}},'宿主机ip:  '),
//                                  h('span',{props:{class:'expand-value'}},params.row.hostIp)
//                              ]),
//                          ]),
//                          h('Row',{props:{class:'expand-row'}},[
//                              h('Col',{props:{span:'8'},style:{width:'50%'}},[
//                                  h('span',{props:{class:'expand-key'}},'实例名称:  '),
//                                  h('span',{props:{class:'expand-value'}},params.row.instance)
//                              ]),
//                              h('Col',{props:{span:'8'},style:{width:'50%'}},[
//                                  h('span',{props:{class:'expand-key'}},'ip:  '),
//                                  h('span',{props:{class:'expand-value'}},params.row.IP)
//                              ]),
//                          ]),
//                          h('Row',{props:{class:'expand-row'},},[
//                              h('Col',{props:{span:'8'},style:{width:'50%'}},[
//                                  h('span',{props:{class:'expand-key'}},'cidr:  '),
//                                  h('span',{props:{class:'expand-value'}},params.row.cidr)
//                              ]),
                                // h('Col',{props:{span:'8'},style:{width:'50%'}},[
                                //     h('span',{props:{class:'expand-key'}},'网络名称:  '),
                                //     h('span',{props:{class:'expand-value'}},params.row.networkName)
                                // ]),
//                          ]),
//                      ])
//                  }
//              },
                {
                    title:this.$t('name'),
                    key:'deviceName',
                    align:'center'
                },
                {
                    title:this.$t('Status'),
                    key:'status',
                    align:'center',
                    render:(h,params)=>{
                        return h('span',{}, paserTaskStatus(params.row.status))
                    }
                },
//              {
//                  title:this.$t('CTime'),
//                  key:'created',
//                  align:'center'
//              },
//              {
//                  title:this.$t('LastUpdate'),
//                  key:'updated',
//                  align:'center'
//              },
                {
                    title:this.$t('Message'),
                    key:'message',
                    align:'center'
                },
//              {
//                  title:this.$t('operation'),
//                  key:'-',
//                  align:'center',
//                  render:(h,params)=>{
//                      let $this = this
//                      return h("Button",{
//                          props:{
//                              type:'primary'
//                          },
//                          on:{
//                              click(){
//                                  let configId = "";
//                                  for(let i = 0;i<$this.taskData.length;i++){
//                                      if($this.taskData[i].id==params.row.taskId){
//                                          // alert('-')
//                                          // c
//                                          configId = $this.taskData[i].configId
//                                          window.open("/TopoLeftFeatures/index.html#/collectTaskResults?vmName="+params.row.deviceName+"&vmId="+params.row.deviceId+"&configId="+configId+"&taskCreateTime="+params.row.created);
//                                          return false;
//                                      }
//                                  }
//                                  
//                              }                           
//                          }
//                      },"查看结果")
//                  }
//              }
            ],
            taskDeailData:[],
            setintervalTime:setInterval(() => {
                
            }, 1000),
            profileValue:'',

            optionHoverEvent:null,
            optionOutEvent:null,
            configurationInformation:false,
            cardPanelLeft:'3px',
            cardPanelTop:'3px',
            configPanel:{
                configPath:'',
                configSystype:'',
                configContent:'',
                configDescription:'',
                configCreateTime:'',
                configCreatorName:'',
                configName:'',
                configType:'',
                configArg:'',
                configCmd:'',
                protocol:'tcp',
                serverPort:'',
                language:'',
            },
            hoverCdraBol:false,
            boxShadow:'5px 5px 5px #ddd',
            configerParams:false,//回显配置详细信息
            metadataConfigerInfor:null,
            currentSceneId:'',
            propertiesData:[],
            vmAttributeData:[],
            deviceList:[],
            currentDevice:[],//设备数据
            peopleValue:[],//人员数据
            currentUsers:[],//保存时数据
            getNameFormId:{},//id和名称对应集合
            userDeciceGroupId:[],//判断是否已经存在
            currentTaskMode:'preset',
            disabledTepBol:false,
            searchSubnet:'',
            selectAll:false
        }
    },
    //props: ['headerData'],
    created(){
        //this.tableHeight = $(window).height() - 224 ;
        // this.tableHeight = '200px';
        this.currentProjectId = this.$route.query.prjid
        this.currentSceneId = this.$route.query.id
        //  this.currentProjectId = "8879b3075da84a0892e1ecc146e8f593"
        this.getTaskList({
            "testId":this.currentSceneId,
			"page":this.taskCurrentPage,
			"rows":this.taskItemPage,
            "taskType":this.taskTypeTable,
            "taskMode":this.currentTaskMode,
            // "node":"true",
        });
        // this.currentProjectId = this.$route.params.username
        // this.currentProjectId = this.$route.query.projectId
        // alert(this.currentProjectId)
        // this.getModelWidth();
        // alert(this.panelWidth)
    },
    computed: {
        // getModelWidth: function () {
        //     this.panelWidth = $(window).width()*0.5 
        // }
        showSubnetList(){
	    	let _this = this;
//	    	return this.subnetList.filter(subnet => subnet.name.indexOf(_this.searchSubnet) != -1);
			return this.subnetList.map(subnet => {
				return {
					key:subnet.id,
					label:subnet.name,
					cidr:subnet.cidr,
                    networkName:subnet.networkName
				}
			})
	    }
    },
    beforeDestroy(){
        clearTimeout(this.headerData.serintervalTimeFun)
    },
    methods: {
        getMsgFormSon(data){
            this.propertiesData = data;
        },
        configeManage(){
            this.taskConfigerMess = true;
            this.$refs.outband.getOutbandcaptureInfoList()
            this.$refs.outband.getSysType()
        },
        clickEvent: function(){
            // this.$emit("success",this.taskTypeTableTitle)
            // this.loadConfiguration(this.taskTypeTable)
            //this.loadConfiguration("outband_capture")
        },
        handleSelectAll (status) {
            this.$refs.selection.selectAll(status)
        },
        createFlagTask(){
            this.judgePanelType = true
            this.$refs['formValidate'].resetFields();
            this.vmCurrentPage = 1
            this.vmItemPage = 10
            this.configType = '1'
            this.formValidate.configer = "";
            this.formValidate.vmName = "";
            this.formValidate.vmIP = "";
            this.formValidate.deviceIdList = [];
            this.queryServerInfo.name = "答题系统";
            this.queryServerInfo.ip = "";
            this.profileValue = "";
            this.configurationData = [];
            this.judgeVmStatus()
            //this.loadConfiguration("outband_capture")
            // if(this.configType == '1'){//2020/5/7 -- 手动配置
            // 	this.$refs.store.clearSingleSelect()
            // }
//          this.getAllServerList();
            this.getServerList();
            this.getSubnetList();
            //this.getVmList({page:this.vmCurrentPage,pageSize:this.vmItemPage,order:"asc",sortBy:"name",name:this.formValidate.vmName,ip:this.formValidate.vmIP})
            this.createFlagTaskModal = true;
            // this.formValidate.name = "";
            this.propertiesData = [{
                key:null,
                value:null,
            }];
            this.formValidate.taskMode = "preset";
            this.formValidate.desc = ""
            // this.selectedVmDataTable = []
            this.selectedVmDataTable = []
            this.formValidate.selectedVmData = []
        },
        ok(){
            this.handleSubmit('formValidate')
        },
        cancel(){
            //  this.$Message.info('Clicked cancel')
        },
        handleSubmit (name) {
            let $this = this;
            this.properties = {};
            if(this.propertiesData.length!=0){
                let attrData = $this.propertiesData;
                for (let index = 0; index < attrData.length; index++) {
                    const element = attrData[index];
                    if(element.key){
                        $this.properties[element.key] = element.value;
                    }
                }
            }
            $this.$refs[name].validate((valid) => {
                if (valid) {
                    // $this.$Message.success('Success!');
                    //if($this.selectedVmDataTable.length!=0){
						let deviceData = [];
                    	let configId;
                    	if(this.configType == '1'){ // 手动配置
                    		if($this.selectedVmDataTable.length == 0){
                    			$this.$Message.info("请选择服务")
		                        $this.createFlagTaskModalLoading = false;
		                        $this.$nextTick(() => {
		                            $this.createFlagTaskModalLoading = true;
		                        });
		                        return
                    		}
                    		deviceData = $this.formValidate.deviceIdList.map(id => {
                            	return {
                            		deviceId:id,
                            		deviceType:"SN"
                            	}
                            })
                    		configId = $this.selectedVmDataTable[0];
                    	}else{ // 一键配置
                    		if($this.serverList.filter(server => server.name == '答题系统').length == 0){
                    			$this.$Message.info("不存在名称为【答题系统】的服务，无法自动分配！")
		                        $this.createFlagTaskModalLoading = false;
		                        $this.$nextTick(() => {
		                            $this.createFlagTaskModalLoading = true;
		                        });
		                        return
                    		}
                            let template
                    		if (this.onlineMode === 1) { // 线上赛
                                template = $this.subnetList.find(subnet => subnet.name.includes('公网交换机'))
                                if (template === undefined) {
                                    $this.$Message.info("不存在名称包含【公网交换机】的子网，无法自动分配！")
                                    $this.createFlagTaskModalLoading = false;
                                    $this.$nextTick(() => {
                                        $this.createFlagTaskModalLoading = true;
                                    });
                                    return
                                }
                                deviceData.push({
                                    deviceId: template.id,
                                    deviceType: "SN"
                                })
                            } else { // 线下赛原来的逻辑
                                if($this.subnetList.filter(subnet => subnet.name.indexOf('接入') != -1).length == 0){
                                    $this.$Message.info("不存在名称包含【接入】的子网，无法自动分配！")
                                    $this.createFlagTaskModalLoading = false;
                                    $this.$nextTick(() => {
                                        $this.createFlagTaskModalLoading = true;
                                    });
                                    return
                                }
                                deviceData = $this.subnetList.filter(subnet => subnet.name.indexOf('接入') != -1).map(subnet => {
                                    return {
                                        deviceId:subnet.id,
                                        deviceType:"SN"
                                    }
                                })
                            }
                    		configId = $this.serverList.filter(server => server.name == '答题系统')[0].id;
                    	}
                        if($this.judgePanelType){//判断是保存还是修改
                            $this.saveoutbandTask({
                                name:$this.formValidate.name,
                                // configName:$this.configPanel.configName,
                                // configId:$this.formValidate.configer.split('-')[0],
                                description :$this.formValidate.desc,
                                deviceData:deviceData,
//                              deviceIdList :$this.formValidate.deviceIdList,
//                              deviceType:"SN",
                                taskType:$this.taskTypeTable,
                                taskMode:$this.formValidate.taskMode,
                                testId:$this.currentSceneId,
                                metadata:{
                                    //configId:$this.selectedVmDataTable[0],
                                    configId:configId,
                                    protocol:$this.formValidate.protocol,
                                },
                                properties:$this.properties,
                            })
                        }else{
                            $this.amendTask({
                                name:$this.formValidate.name,
                                // configName:$this.configPanel.configName,
                                // configId:$this.formValidate.configer.split('-')[0],
                                description :$this.formValidate.desc,
                                deviceData:deviceData,
//                              deviceIdList :$this.formValidate.deviceIdList,
//                              deviceType:"SN",
                                taskType:$this.taskTypeTable,
                                taskMode:$this.formValidate.taskMode,
                                testId:$this.currentSceneId,
                                metadata:{
                                    //configId:$this.selectedVmDataTable[0],
                                    configId:configId,
                                    protocol:$this.formValidate.protocol,
                                },
                                properties:$this.properties,
                            })
                        }
                        
//                  }else{
//                      $this.$Message.info("请选择虚拟机")
//                      $this.createFlagTaskModalLoading = false;
//                      $this.$nextTick(() => {
//                          $this.createFlagTaskModalLoading = true;
//                      });
//                  }

                } else {
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }
                
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        addVmAfterTable(param){
            let data = this.dataVmList;
            this.dataVmList.forEach(function(item,i){
                if(item.id==param.id){
                    item._checked = true;
                    item._disabled = true;
                }
            })
        },
        handleAdd () {
            // if (this.selectedVmData.length) {
            //     this.selectedVmData.push(this.count[this.count.length - 1] + 1);
            // } else {
            //     this.selectedVmData.push(0);
            // }
        },
        handleClose2 (event, name) {
            let $this = this;
            let data = this.formValidate.selectedVmData;
            $this.selectedDataConfiger = [];
            let _data = this.selectedVmDataTable;
            data.forEach((item,i)=>{
                if(item){
                    if(item.id==name){
                        data.splice(i,1);
                        //_data.remove(name);
                        let _datai = $this.selectedVmDataTable.findIndex(vmId => vmId == item.id);
                        _data.splice(_datai,1);
                        $this.judgeVmStatus()
                    }
                }
            });
           
            // const index = this.selectedVmData.indexOf(name);
            // this.count.splice(index, 1);
        },
        judgeVmStatus(){
            let data = this.dataVmList;
            let data_ = this.selectedVmDataTable
            data.forEach(function(item,i){
                if(data_.indexOf(item.id)!=-1){
                    // alert('-')
                    item._checked = true;
                    item._disabled = true;
                }else{
                    item._checked = false;
                    item._disabled = false;
                }
            })
        },
        loadConfiguration(operation){
            let $this= this;
//          axios({
//                url:'checker/scripts?pageIndex=1&pageSize=100000',
//            })
            let params = {
            	pageIndex :1,
            	pageSize:100000
            }
            loadConfiguration().then((response)=>{
                if(response.code==1||response.code==0){
                    $this.configurationData = response.data.items;
                    // let ConfigurationList = response.data.items;
                    // if(ConfigurationList==""){
                    //     return;
                    // }
                    // $.each(ConfigurationList, function(i,item) {
                    //     // let profile = "";
                    //     // if(item.data){
                    //     //     profile = item.data.profile;
                    //     // }
                    //     $this.configurationData.push({
                    //         name:item.name,
                    //         id:item.id,
                    //     })
                    // });
                }else{
                    $this.$Message.error(response.prompt)
                }
            })
        },
        getVmList(getParamObj){
            let $this = this;
//          axios({
//              url: this.GLOBAL._projPath_deploy+'project/servers?'+this.BASE.getParamStr(getParamObj),
//          })
            getServerList(getParamObj).then((response)=>{
                $this.dataVmList = [];
                if(response.code==1){
                    let vmData = response.attribute.dataList;
                    $this.dataVmList = response.attribute.dataList;
                    $this.vmTotal = Number(response.attribute.totalCount);
//                  let disabled_ = false;
//                  let checked_ = false;
//                  vmData.forEach(function(item,i){
//                      if($this.selectedVmDataTable.length!=0){
//                          if($this.selectedVmDataTable.indexOf(item.id)!=-1){
//                              disabled_ = true
//                              checked_ = true
//                          }else{
//                              disabled_ = false
//                              checked_ = false
//                          }
//                      }else{
//                          disabled_ = false
//                          checked_ = false
//                      }
//                      $this.dataVmList.push(
//                      	Object.assign(item,{
//                      	_disabled: disabled_,
//                          _checked:checked_,})
//                      	{
//                          name:item.name,
//                          id:item.id,
//                          //sysType:item.sysType,
//                          //profile:item.profile = item.profile ? item.profile :'',
//                          IP:item.ip,
//                          _disabled: disabled_,
//                          _checked:checked_,
//
//                      })
//                  })
                }
            })
        },
        switchineVmCurrentPage(numberPage){
            this.vmCurrentPage = numberPage;
            this.getVmList({page:this.vmCurrentPage,rows:this.vmItemPage,order:"asc",sortBy:"name",name:this.formValidate.vmName,ip:this.formValidate.vmIP})
        },
        switchVmItemPage(numberSize){
            this.vmItemPage = numberSize
            this.getVmList({page:this.vmCurrentPage,rows:this.vmItemPage,order:"asc",sortBy:"name",name:this.formValidate.vmName,ip:this.formValidate.vmIP})
        },
        saveoutbandTask(saveDateJson){
            let $this = this;
//          axios({
//              url:this.GLOBAL._projPath_process+"custom/tasks",
//              method:'post',
//              data:saveDateJson
//          })
            saveoutbandTask(saveDateJson).then((response)=>{
                if(response.code==1){
                    $this.createFlagTaskModal = false;
                    $this.$Message.success('添加任务成功');
                    // 添加成功后清空搜索条件，回退到首页
                    $this.taskCurrentPage = 1
                    $this.getTaskList({
                        "testId":$this.currentSceneId,
                        "page":$this.taskCurrentPage,
                        "rows":$this.taskItemPage,
                        "taskType":$this.taskTypeTable,
                        "taskMode":$this.currentTaskMode,
                        // "node":"false",
                    })
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                    //$this.$parent.getStatisticsList();
                }else{
                    $this.$Message.error(response.message)
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }
            })
        },
        getTaskList(obj){
            let $this = this;
            //clearTimeout($this.headerData.serintervalTimeFun)
//          axios({
//              url:this.GLOBAL._projPath_process +"custom/tasks?"+this.BASE.getParamStr(obj),
//          })
            getTaskList(obj).then((response)=>{
                if(response.code==1){
                    $this.taskData = [];
                    $this.taskTotal = response.data.total;
                    let setintrvalBol = false
                    // let _s = 0,_e = 0,_i = 0,_r = 0,stintervalBol = false;
                    if(response.data.items.length!=0){
                        $this.taskData = response.data.items.map((item)=>{
                            if($this.selectedData.map((item)=>item.id).join(',').indexOf(item.id)!=-1){
                                item['_checked'] = true;
                            }else{
                                item['_checked'] = false;
                            }
                            return item;
                        });
                        response.data.items.forEach(function(item,i){
                            if(item.status=="running"||item.status=="starting"||item.status=="closing"){
                                setintrvalBol = true;
                            }
                        })
                    }
                    if(setintrvalBol){
                        $this.headerData.serintervalTimeFun  = setTimeout(() => {
                            $this.getTaskList({
                                "testId":$this.currentSceneId,
                                "page":$this.taskCurrentPage,
                                "rows":$this.taskItemPage,
                                "taskType":$this.taskTypeTable,
                                "taskMode":$this.currentTaskMode,
                                // "node":"false",
                            });
                        }, 2000);
                        
                    }else{
                        clearTimeout($this.headerData.serintervalTimeFun)
                        // $this.setintervalTaskList();
                    }
                    // $this.getTaskListDeailData()
                    // $this.$emit("success",$this.taskTypeTableTitle+'-'+_s+'-'+_e+'-'+_i+'-'+_r+'-'+stintervalBol+'-'+$this.taskCurrentPage+'-'+$this.taskItemPage)
                }else if(response.code==-2){
                    
                }else{
                    $this.$Message.error(response.message)
                }
            })
        },
        switchineTaskCurrentPage(numberPage){
            this.taskCurrentPage = numberPage;
            this.getTaskList({
                "testId":this.currentSceneId,
                "page":this.taskCurrentPage,
                "rows":this.taskItemPage,
                // "configType":"",
                "taskType":this.taskTypeTable,
                "taskMode":this.currentTaskMode,
            })
        },
        switchTaskItemPage(numberSize){
            this.taskItemPage = numberSize
            this.getTaskList({
                "testId":this.currentSceneId,
                "page":this.taskCurrentPage,
                "rows":this.taskItemPage,
                // "configType":"",
                "taskType":this.taskTypeTable,
                "taskMode":this.currentTaskMode,
            })
        },
        deleteTask(taskId){
            let $this = this
//          axios({
//              url:this.GLOBAL._projPath_process +"custom/tasks/"+taskId,
//              method:'delete'
//          })
            deleteTask(taskId).then((response)=>{
                if(response.code==1){
                    if(response.data[0].code==1){
                        // 删除后展示当前页，当前页没有数据展示前一页
                        this.taskCurrentPage = (this.taskData.length == 1 && this.taskCurrentPage > 1) ?
                            this.taskCurrentPage - 1 : this.taskCurrentPage;
                        $this.getTaskList({
                            "testId":$this.currentSceneId,
                            "page":$this.taskCurrentPage,
                            "rows":$this.taskItemPage,
                            "taskType":$this.taskTypeTable,
                            "taskMode":$this.currentTaskMode,
                        })
                        $this.$Message.success("删除成功")
                        //$this.$parent.getStatisticsList();
                    }else{
                        $this.$Message.error(response.data[0].message)
                    }
                    
                }else{
                    $this.$Message.error(response.data[0].message)
                }
            })
        },
        updateTask(taskId){
            this.judgePanelType = false
            this.formValidate.vmName = "";
            this.formValidate.vmIP = "";
            this.queryServerInfo.name = "";
            this.queryServerInfo.ip = "";
            this.configType = '1';
            let $this = this
//          $this.getServerList();
            $this.getSubnetList();
//          axios({
//              url:this.GLOBAL._projPath_process +"custom/tasks/"+taskId,
//          })
            taskDetail(taskId).then((response)=>{
                if(response.code==1){
                    $this.workingAreaTaskId = response.data.id
                    $this.selectedVmDataTable = []
                    $this.formValidate.selectedVmData = []
                    $this.createFlagTaskModal = true;
                    $this.propertiesData = [];
                    $this.formValidate.name = response.data.name;
                    $this.formValidate.desc = response.data.description;
                    $this.formValidate.deviceIdList = response.data.deviceData.map(device => device.deviceId);
                    $this.formValidate.protocol = response.data.metadata.protocol;
                    //$this.formValidate.expireTime = String(response.data.metadata.interval);
                    //$this.formValidate.configId = response.data.metadata.configId;
                    if(response.data.metadata.configId){
                    	    let configId = response.data.metadata.configId;
                    	    $this.getAllServerList().then((serverList) => {
                    	    	let configName = serverList.filter(server => server.id == configId)[0].name;
	                      	    $this.selectedVmDataTable.push(response.data.metadata.configId);
	                            $this.formValidate.selectedVmData.push({
	                                name:configName,
	                                id:configId
	                            })
                    	    })
//                      response.data.deviceData.forEach(function(item,i){
//                          $this.selectedVmDataTable.push(item.deviceId);
//                          $this.formValidate.selectedVmData.push({
//                              name:item.deviceName,
//                              id:item.deviceId
//                          })
//                      })
                    }
                    //$this.loadConfiguration();
//                  $this.getSubnetList();
                    //$this.formValidate.taskMode = response.data.taskMode;
                    if(JSON.stringify(response.data.properties)!="{}"){
                        for(let i in response.data.properties){
                            let obj = {};
                            obj['key'] = i;
                            obj['value'] = response.data.properties[i];
                            $this.propertiesData.push(obj)
                        }
                    }
                }else{
                    $this.workingAreaTaskId = ""//清空任务id
                    $this.$Message.error(response.message)
                }
            }).then(()=>{
//          	$this.getSubnetList();
//          	$this.getServerList();
                //$this.loadConfiguration("outband_capture")
                //$this.getVmList({page:this.vmCurrentPage,rows:this.vmItemPage,order:"asc",sortBy:"name",name:this.formValidate.vmName,ip:this.formValidate.vmIP})
                $this.judgeVmStatus()
            })
        },
        amendTask(amendTaskData){
            let $this = this;
//          axios({
//              url:this.GLOBAL._projPath_process+"custom/tasks/"+this.workingAreaTaskId,
//              method:'put',
//              data:amendTaskData
//          })
            amendTask(this.workingAreaTaskId,amendTaskData).then((response)=>{
                if(response.code==1){
                    $this.createFlagTaskModal = false;
                    $this.$Message.success("修改成功");
                    $this.getTaskList({
                        "testId":$this.currentSceneId,
                        "page":$this.taskCurrentPage,
                        "rows":$this.taskItemPage,
                        "taskType":$this.taskTypeTable,
                        "taskMode":$this.currentTaskMode,
                    })
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }else{
                    $this.$Message.error(response.message)
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }
            })
        },
        activeTask(taskId,active){
            let $this = this
            if(active=="开始"){
                active = "start"
            }else if(active=="停止"){
                active = "stop"
            }
//          axios({
//              url:this.GLOBAL._projPath_process +"custom/tasks/"+taskId+'/execute?operation='+active,
//              method:'post'
//          })
            activeTask(taskId,active).then((response)=>{
                let activeType;
                if(response.code==1){
                    $this.$Message.success(`${active === 'start' ? '开始' : '停止'}任务成功`)
                    $this.getTaskList({
                        "testId":$this.currentSceneId,
                        "page":$this.taskCurrentPage,
                        "rows":$this.taskItemPage,
                        "taskType":$this.taskTypeTable,
                        "taskMode":$this.currentTaskMode,
                    });
                }else{
                    $this.$Message.error(response.message)
                }
            })
        },
        taskDeail(taskId){
            let $this = this
//          axios({
//              url:this.GLOBAL._projPath_process +"custom/tasks/"+taskId+'/histories',
//          })
            taskDetailHis(taskId).then((response)=>{
                if(response.code==1){
                    $this.taskDeailData = [];
                    $this.taskDeailModal = true
                    // $this.taskDeailData= reponse.data;
                    response.data.forEach(function(item,i){
                        $this.taskDeailData.push({
                        	id:item.id,
                            deviceName:item.deviceName,
                            taskId:item.taskId,
                            created:item.created,
                            status:item.status,
                            message:item.message,
                            deviceId:item.deviceId,
                            IP:'',
                            host:'',
                            hostIp:'',
                            instance:'',
                            osId:'',
                            cidr:'',
                            created:item.created ? item.created:'',
                            updated:item.updated ? item.updated:'',
                            _expanded:false
                        })
                    })
                }else{
                    $this.$Message.error(response.message)
                }
            })
        },
        deleteManyTask(selection){
            let $this = this;
            if(this.selectedData.length==0){
                this.$Message.error("请选择要删除的任务")
            }else{
//              axios({
//                  url:this.GLOBAL._projPath_process +"custom/tasks/"+this.selectedData.map((item)=>item.id).join(','),
//                  methods:'delete'
//              })
                deleteManyTask(this.selectedData.map((item)=>item.id).join(',')).then((response)=>{
                    if(response.code==1){
                        response.data.forEach(function(item,i){
                            if(item.code==1){
                                $this.$Message.success("删除成功")
                            }else{
                                $this.$Message.error(item.message)
                            }
                        })
                        $this.getTaskList({
                            "testId":$this.currentSceneId,
                            "page":$this.taskCurrentPage,
                            "rows":$this.taskItemPage,
                            "taskType":$this.taskTypeTable,
                            "taskMode":$this.currentTaskMode,
                        })
                    }else{
                        $this.$Message.error(response.message)
                    }
                })
            }
        },
        getSelectedTableItem(selection){
            this.selectedData = [];
            this.selectedData = selection
        },
        hostDeail(row){
            let $this  = this;
            if(!row._expanded){
//              axios({
//                  url:this.GLOBAL._projPath_deploy+"project/servers/"+row.deviceId,
//              })
                hostDetail(row.deviceId).then((response)=>{
                    if(response.code==1){
                        $this.taskDeailData.forEach(function(item,i){
                            if(row.id==item.id){
                                item._expanded = true
                                item.host = response.data.host;
                                item.hostIp = response.data.hostIp;
                                item.instance = response.data.instanceName;
                                item.osId= response.data.cloudId;
                                item.IP = response.data.addresses.map((item)=> item.ips.map(ip => ip.ipAddress).join(','))
                                item.cidr = response.data.addresses.map((item)=> item.ips.map(ip => ip.cidr).join(','))
                                // item.created = reponse.data.created ? reponse.data.created : ''
                                // item.updated = reponse.data.updated ? reponse.data.updated : ''
                                return false;
                            }
                        })
                    }else{
                    	$this.$Message.warning(response.message)
                    }
                })
            }else{
                row._expanded = !row._expanded;
            }
        },
        // setintervalTaskList(obj){
        //     let $this = this;
        //     $.ajax({
        //         type:"get",
        //         url:_projPath_process +"custom/tasks?"+GlobalTool.getParamStr(obj),
        //         async:true,
        //         dataType:"json",
        //         headers:{"Authorization":localStorage.token},
        //         contentType:"application/json",
        //         success:function(reponse){
        //             if(reponse.code==1){
        //                 if(reponse.data.list.length!=0){
        //                     $.each(reponse.data.list,function(i,item){

        //                     })
        //                     $this.taskData = reponse.data.list;
        //                 }
        //             }else if(reponse.code==-2){
                        
        //             }else{
        //                 $this.$Message.error(response.message)
        //             }
        //         },
        //         error:function(){
        //             $this.$Message.error(errorMessage)
        //         }
        //     });
        // },
        refreshTaskList(){
            this.getTaskList({
                "testId":this.currentSceneId,
                "page":this.taskCurrentPage,
                "rows":this.taskItemPage,
                "taskType":"",
                "taskMode":this.currentTaskMode,
            });
        },
        refreshVmList(){
            this.queryServerInfo.page = 1;
        	this.getServerList();
        },
        getTaskListDeailData(){
            let $this = this
//          axios({
//              url:this.GLOBAL._projPath_process +"overview/task/countByStatus?"+this.BASE.getParamStr({
//                  "testId":$this.currentSceneId,
//                  "taskType":$this.taskTypeTable,
//                  "node":"false"
//              }),
//          })
            let params = {
            	"testId":$this.currentSceneId,
                "taskType":$this.taskTypeTable,
                "node":"false"
            }
            getTaskListDetailData(params).then((response)=>{
                if(response.code==1){
                    let _s = 0,_e = 0,_i = 0,_r = 0,starting = 0,closing = 0,stintervalBol = false;
                    _s = response.data.completed;
                    _e = response.data.error;
                    _i = response.data.initialized;
                    _r = Number(response.data.running)+Number(response.data.starting)+Number(response.data.closing);
                    starting =  response.data.starting
                    closing =  response.data.closing
                    if(_r!=0){
                        stintervalBol = true;
                    }
                    $this.$emit("success",$this.taskTypeTableTitle+'-'+_s+'-'+_e+'-'+_i+'-'+_r+'-'+stintervalBol+'-'+$this.taskCurrentPage+'-'+$this.taskItemPage)
                }else if(response.code==-2){
                    
                }else{
                    $this.$Message.error(response.message)
                }
            })
        },
        setintervalTaskList(){
            // alert('-')
            let $this = this;
//          axios({
//              url:this.GLOBAL._projPath_process +"custom/tasks?"+this.BASE.getParamStr({
//                  "testId":this.currentSceneId,
//                  "page":this.taskCurrentPage,
//                  "rows":this.taskItemPage,
//                  "taskType":this.taskTypeTable,
//                  "node":"false"
//              }),
//          }
            let params = {
            	"testId":this.currentSceneId,
                "page":this.taskCurrentPage,
                "rows":this.taskItemPage,
                "taskType":this.taskTypeTable,
                "node":"false"
            }
            getTaskList(params).then((response)=>{
                if(response.code==1){
                    $this.taskData = [];
                    if(response.data.list.length!=0){
                        let stintervalBol  = false
                        $this.taskData = response.data.list
                        response.data.list.forEach(function(item,i){
                            if(item.status=="running"||item.status=="starting"||item.status=="closing"){
                                stintervalBol = true
                            }
                            $this.taskData[i].status = item.status;
                        })
                        if(!stintervalBol){
                            clearTimeout($this.headerData.serintervalTimeFun)
                        }
                    }
                    $this.getTaskListDeailData()
                }else if(response.code==-2){
                    
                }else{
                    $this.$Message.error(response.message)
                }
            })
        },
        addSelectedData(){
            let that = this,bol = true;
            that.selectedDataConfiger.forEach(function(item,i){
                if(that.selectedVmDataTable.indexOf(item.id)!=-1){
                    
                }else{
                    bol = false
                    that.addVmAfterTable(item)
                    that.selectedVmDataTable.push(item.id)
                    that.formValidate.selectedVmData.push({
                        "name":item.name,
                        "id":item.id
                    })
                }
            })
            if(bol){
                that.$Message.info("请选择要添加的内容")
            }
        },
        getSelectedData(selection){
            this.selectedDataConfiger = [];
            this.selectedDataConfiger = selection;
        },
        listenConfigerChange(value){
            let _this = this;
            if(value){
                this.selectedVmDataTable = [];
                this.formValidate.selectedVmData = [];
                this.profileValue = value.split('-')[1];
                this.getVmList({page:this.vmCurrentPage,rows:this.vmItemPage,order:"asc",sortBy:"name",name:this.formValidate.vmName,ip:this.formValidate.vmIP})
//              axios({
//                  url: '/tasktemplate/item/' + value.split('-')[0],
//                  method: 'get',
//              })
                showConfiguration(value.split('-')[0]).then(function (response) {
                    if(response.code != '1'){
                        _this.$Message.warning(response.message);
                    }else{
                        // _this.configerParams = true
                        _this.formValidate.Profile = response.data.data.profile ? response.data.data.profile :''
                        _this.formValidate.osInfo = response.data.data.osinfo ? response.data.data.osinfo :''
                        _this.formValidate.type = response.data.data.cmds[0].allData=="True" ? '全量' : '增量' 
                        _this.formValidate.configContent = response.data.data.cmds;
                        _this.metadataConfigerInfor =  response.data.data
                        _this.configPanel.configName = response.data.name;
                        // _this.metadataConfigerInfor['configurationName'] = response.data.name;
                    }
                });
            }else{
                _this.configerParams = false;
                _this.formValidate.Profile = ""
                _this.formValidate.osInfo = ""
                _this.formValidate.type = ""
                _this.formValidate.configContent = ""
            }
            //增加profile过滤
            
        },
        clearConfigerChange(){
            this.selectedVmDataTable = [];
            this.formValidate.selectedVmData = [];

            this.profileValue = ""
            //增加profile过滤
            this.getVmList({page:this.vmCurrentPage,rows:this.vmItemPage,order:"asc",sortBy:"name",name:this.formValidate.vmName,ip:this.formValidate.vmIP})
        },
        jinru(e){
            this.hoverCdraBol = true
        },
        yichu(e){
            this.hoverCdraBol = false
            this.configurationInformation = false
            this.cardPanelLeft = '0'
            this.cardPanelTop = '0'
        },
        ddd(e){
            e.preventDefault()
            e.stopPropagation();
        },
        overStyle(){
            this.boxShadow = '5px 5px 5px #ddd'
        },
        removeStyle(){
            this.boxShadow = ''
        },
        //查询工程下的子网列表
        getSubnetList(){
            let params = {
                page:1,
                rows:10000,
                projectId:this.currentProjectId
            }
            getprojsubnet(params).then(data => {
                if(data.code == 1){
                    this.subnetList = data.data.items;
                }else{
                    this.subnetList = [];
                }
            })
        },
        //查询服务列表
        getServerList(){
        	return new Promise((resolve, reject) => {
        		getServerList(this.queryServerInfo).then(data => {
	                if(data.code == 1){
	                    this.serverList = data.attribute.dataList;
	                    this.serverTotal = data.attribute.totalCount;
	                    resolve(data.attribute.dataList);
	                }else{
	                    this.serverList = [];
	                }
	            })
        	})
        },
        //查询所有服务
        getAllServerList(){
        	let params = {
        		page:1,
                pageSize:2147483646,
                order:'asc',
                sortBy:'name'
        	}
        	return new Promise((resolve, reject) => {
        		getServerList(params).then(data => {
	                if(data.code == 1){
	                    this.allServerList = data.attribute.dataList;
	                    resolve(data.attribute.dataList);
	                }else{
	                    this.allServerList = [];
	                }
	            })
        	})
        },
        changeServerPage(page){
        	this.queryServerInfo.page = page;
        	this.getServerList();
        },
        changeServerSize(size){
        	this.queryServerInfo.pageSize = size;
        	this.getServerList();
        },
        changeConfigType(type){
        	if(type == '2'){
            	this.$refs['formValidate'].resetFields();
            	this.vmCurrentPage = 1
	            this.vmItemPage = 10
	            this.formValidate.configer = "";
	            this.formValidate.vmName = "";
	            this.formValidate.vmIP = "";
	            this.queryServerInfo.ip = "";
	            this.queryServerInfo.name = '答题系统';
	            this.profileValue = "";
	            this.configurationData = [];
	            this.judgeVmStatus()
	            //this.loadConfiguration("outband_capture")
	            // if(this.configType == '1'){//2020/5/7
	            // 	this.$refs.store.clearSingleSelect()
	            // }
	            this.getSubnetList();
	            this.propertiesData = [{
	                key:null,
	                value:null,
	            }];
	            this.formValidate.taskMode = "preset";
	            this.formValidate.desc = ""
	            this.selectedVmDataTable = []
	            this.formValidate.selectedVmData = []
            }else{
            	this.queryServerInfo.name = '';
            }
            this.getServerList();
        },
        keydownEnter(){
      		return false;
        },
        selectAllSubnet(status){
        	if(status) {
        		this.formValidate.deviceIdList = this.showSubnetList.map(subnet => subnet.id);
        	}else{
        		this.formValidate.deviceIdList = [];
        	}
        },
        arrayEqual(){
	    	if(this.formValidate.deviceIdList.sort().toString() == this.showSubnetList.map(subnet => subnet.id).sort().toString()){
	    		this.selectAll = true;
	    	}else{
	    		this.selectAll = false;
	    	}
	    },
	    filterMethod (data,query) {
        	//return data.label.indexOf(query) > -1 || data.des.indexOf(query) > -1;
        	return data.label.indexOf(query.trim()) > -1 || data.cidr.indexOf(query.trim()) > -1
        },
        render2(subnet){
			return '<span title="名称:'+subnet.label+'CIDR:'+subnet.cidr+'">名称:'+subnet.label + ' /CIDR:' + subnet.cidr + '/'+ subnet.networkName+ '</span>'
	    },
	    changeSubnet(ids){
	    	this.formValidate.deviceIdList = ids;
	    }
    },
    watch:{
        headerData: {
            handler(newVal, oldVal) {
            },
            deep: true
        },
        showSubnetList:{
        	handler(){
        		this.arrayEqual()
        	},
            deep: true
        }
    }
}
</script>
<style scoped>
.headerBtn{
    text-align: left;
    margin: 15px 0;
}
.pageStyle{
    text-align:right;
    float:right;
}
.ivu-table-wrapper{
    overflow:visible
}
.pageStyleVm{
    text-align: center;
    margin-top:10px
}
table .ivu-poptip-confirm .ivu-poptip-body .ivu-icon{
    left: 11px
}

.position_i{
    position: relative;
    top: -1px;
    margin-right: 5px
}
/* td{
    border-right: 0 !important
} */
.ivu-table-tip{
    overflow: hidden !important;
}
.starlet{
    color: red;
    position: absolute;
    left: -60px;
    font-size: 18px;
    line-height: 38px;
    font-weight: 800;
}
.zIndexStyleBtn{
    position:relative;
    z-index:55
}
ul li{
    list-style: none
}
._dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f90;
    margin-right: 5px
}
</style>
<style>
    .btnCenter .ivu-poptip-confirm .ivu-poptip-body{
        text-align:left;
    }
    .ivu-form-item-error .ivu-filter-input .ivu-input{
        border:0px 0px 8px rgb(56 , 56, 211)!important;
        box-shadow:0px 0px 8px rgb(56 , 56, 211)!important;
    }
</style>

